<template>
  <div class="import">
    <el-card>
      <h4>员工导入</h4>
      <el-alert
        class="myalert"
        type="warning"
        title="每次导入仅可添加1000名员工，姓名、手机、入职时间、聘用形式为必填项"
        show-icon
      >
      </el-alert>
      <myexcel :beforeUpload="beforeUpload" :onSuccess="onSuccess"></myexcel>
    </el-card>
  </div>
</template>

<script>
import { importEmpApi } from '@/api/employees'
export default {
  methods: {
    // 上传之前触发
    beforeUpload (file) {
      // 判断文件的大小：是否小于 2M
      // 内存单位的换算
      // 1024b = 1kb  1024kb = 1mb  1024mb = 1GB  1024GB = 1TB
      const isLess2M = file.size / 1024 / 1024 < 2
      if (!isLess2M) {
        this.$message({
          type: 'error',
          message: '文件大小不能超过 2M'
        })
      }
      return isLess2M
    },
    // 将天数转为具体的时间
    formatDate (day) {
      // 转为时间戳
      const timeStemp = (day - 1) * 24 * 60 * 60 * 1000
      // 将时间戳转为具体时间
      const time = new Date(timeStemp)
      // 将年份减去 70 年
      // 01 得到年份
      const year = time.getFullYear()
      // 02 重新设置年份
      time.setFullYear(year - 70)
      // 返回时间
      return time
    },
    // 上传成功触发
    async onSuccess ({ header, results }) {
      // 得到员工的列表数据： results （数据中的键全部是中文）
      // 将数据中的中文属性改为英文属性
      // 01 得到中文属性对应的英文属性
      var obj = {
        手机号: 'mobile',
        姓名: 'username',
        入职日期: 'timeOfEntry',
        转正日期: 'correctionTime',
        工号: 'workNumber'
      }
      // 02 根据 obj 遍历 results，将所有的中文键改为英文键
      const data = results.map(item => {
        // 创建一个新的对象，用来保存英文键的对象
        const newObj = {}
        Object.keys(item).forEach(key => {
          // 得到中文 key 对应的英文
          const engKey = obj[key]
          // 判断当前的 engKey 是否是时间
          if (engKey === 'timeOfEntry' || engKey === 'correctionTime') {
            // 将天数据转为具体的时间
            const time = this.formatDate(item[key])
            // 赋值时间
            newObj[engKey] = time
          } else {
            // 将 英文 添加到 newObj 中
            newObj[engKey] = item[key]
          }
        })
        return newObj
      })
      // 将数据提交到服务器
      await importEmpApi(data)
      // 提示成功
      this.$message({
        type: 'success',
        message: '批量导入成功'
      })
      // 跳转到员工列表
      this.$router.push('/employees')
    }
  }
}
</script>

<style lang="scss">
.import {
  margin: 20px;
  h4 {
    text-align: center;
  }
  .myalert {
    margin-bottom: 40px;
  }
}
</style>
